<template>
  <div class="world">
    <div class="Worldmap">
      <div class="top">
        <div class="map-title">
          海外<span>截至{{times}}数据统计</span>
        </div>
        <div class="foreignNum">
          <div class="t_item">
            <h5>累计确诊</h5>
            <span>{{ certain | numbers }}</span>
            <h4>较昨日<b>{{ certain_inc|yesterdaynumss }}</b></h4>
          </div>
          <div class="t_item">
            <h5>累计死亡</h5>
            <span>{{ die | numbers }}</span>
            <h4>较昨日<b>{{ die_inc|yesterdaynumss }}</b></h4>
          </div>
          <div class="t_item">
            <h5>累计治愈</h5>
            <span>{{ recure | numbers }}</span>
            <h4>较昨日<b>{{ recure_inc|yesterdaynumss }}</b></h4>
          </div>
        </div>
      </div>
      <!-- 地图容器 -->
      <div id="main" style="width: 7.5rem; height: 7rem"></div>
    </div>

  </div>
</template>

<script>
import api from "../../api/index";

export default {
  name: "WorldMap",
  data() {
    return {
      times:'',//时间
      certain: '',//累计确诊
      die: '',//累计死亡
      recure: '',//累计治愈
      certain_inc: '',//较昨日累计确诊
      die_inc: '',//较昨日累计死亡
      recure_inc: ''//较昨日累计治愈
    }
  },
  mounted() {
    //-------------------------
    api.getWorldData().then((res) => {
      console.log("--世界---", res.data);
      this.times=res.data.data.cachetime//时间
      let foreignTotal = res.data.data.othertotal;//海外数据
      console.log(foreignTotal);
      this.certain = foreignTotal.certain;//累计确诊
      this.die = foreignTotal.die;//累计死亡
      this.recure = foreignTotal.recure;//累计治愈
      this.certain_inc = foreignTotal.certain_inc;//较昨日累计确诊
      this.die_inc = foreignTotal.die_inc;//较昨日累计死亡
      this.recure_inc = foreignTotal.recure_inc;//较昨日累计治愈
      let world = res.data.data.otherlist;//海外国家数据
      if (!world) {
        this.$myChart.worldMap("main", []);
        return;
      }
      let arr = []; //累计
      for (let i = 0; i < world.length; i++) {
        let obj = {};
        obj.name = world[i].name;
        obj.value = world[i].value; //累计确诊人数   curConfirm现在确诊人数
        arr.push(obj);
      }
      this.$myChart.worldMap("main", arr);
    });
    console.log(this.certain==="");

  },
  filters: {
    numbers(value) {
      if (value?.length > 4) {
        let num = Math.floor(value / 10000)
        return num + '万'
      }
      if(value?.length < 4&&value?.length >= 0){
        return value
      }
      if (value===undefined){
        console.log(value);
        return '未公布'
      }

    },
    yesterdaynumss(value) {
      if (value?.length > 0) {
        let yedaynum = value.substring(1);
        let numfu = value.substring(0, 1);
        if (yedaynum.length > 4) {
          let num = Math.floor(yedaynum / 10000)
          return numfu + num + '万'
        } else {
          return value
        }
      }
      if (value===undefined){
        console.log(value);
        return '未公布'
      }
    }
  }
};
</script>

<style scoped>
.world {
  background-color: #f8f8f8;
}

/*wordemap开始*/
.Worldmap {
  display: flex;
  flex-direction: column;
}

/*top开始*/
.Worldmap .top {
  margin: 10px;
  background: #ffffff;
  border-radius: 8px;
}

.top .map-title {
  margin: 0.2rem;
  font-size: 0.32rem;
  color: #4d79f3;
  font-weight: bold;
}

.top .map-title::before {
  content: "";
  border-left: 0.1rem solid #4d79f3;
  font-size: 0.32rem;
  margin-right: 0.1rem;
  border-radius: 0.04rem;
}

.top .map-title span {
  color: #777;
  font-size: 10px;
  padding: 6px;
}

.top .foreignNum {
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px;
}

.foreignNum .t_item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.foreignNum .t_item h5 {
  color: #393939;
  font-size: 10px;
  line-height: 18px;
}

.foreignNum .t_item span {
  font-size: .42rem;
  font-weight: bold;
  line-height: .59rem;
  font-family: 'PingFang SC';
}

.foreignNum .t_item:nth-child(1) span {
  color: #b10000;
}

.foreignNum .t_item:nth-child(2) span {
  color: #4b4b4b;
}

.foreignNum .t_item:nth-child(3) span {
  color: #13b593;
}

.foreignNum .t_item h4 {
  display: block;
  color: #999;
  line-height: .28rem;
  font-size: 0.1rem;
}

.foreignNum .t_item h4 b {
  color: #666;
}

.title {
  margin: 0.2rem;
  padding-top: 0.2rem;
  border-top: 1px solid #eee;
}

.title::before {
  content: "";
  border-left: 0.1rem solid rgb(9, 60, 202);
  font-size: 0.26rem;
  margin-right: 0.1rem;
}

#main {
  background: #f5f5f5;
}
</style>
